import React, { useEffect, useState } from 'react'
import { Button, Table, message, Form, Image, Drawer, Radio, Input, Upload, Card } from 'antd'
import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
import api from '@/api'
export default function Swiper() {
    useEffect(() => {
        getlist()
    }, [])
    const [form] = Form.useForm();
    const [open, setOpen] = useState(false)
    const [adds, setadd] = useState(false)
    const [list, setlist] = useState([{
        name: '',
        id: '',
        herf: '',
        bei3: '',
        img: ''
    }])
    const getlist = async () => {
        const res = await api.swiper.GetSwiper()
        setlist(res.data.data)
        console.log(res.data.data);

    }

    const getDetail = async (arg: any) => {
        console.log(arg, '00');

        let arg1 = arg.id
        console.log(list);

        let i = list.findIndex((value: any) => value.id == arg1)
        console.log(i);

        form.setFieldsValue({
            name: list[i].name,
            id: list[i].id,
            herf: list[i].herf,
            bei3: list[i].bei3,
            img: list[i].img
        });
        setOpen(true)
    }
    const setDetail = async (arg: any) => {
        setadd(false)
        getDetail(arg)

    }
    const deletethis = async (arg: any) => {
        console.log(arg);
        const res = await api.swiper.deleteSwiper(arg.id)
        console.log(res);
        if (res.data.code) {
            message.success('删除成功')
            getlist()
        }

    }
    const addswiper = async () => {
        setadd(true)
        form.setFieldsValue({
            name: '',
            id: '',
            herf: '',
            bei3: '',
            img: ''
        });
        setOpen(true)
    }
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '图片',
            dataIndex: 'img',
            render: (arg: any) => {
                return <Image width={50} src={arg}></Image>
            }
        },
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '链接',
            dataIndex: 'herf',
        },
        {
            title: '介绍',
            dataIndex: 'bei3',
        },
        {
            title: '操作',
            render: (record: any) => (
                <label >
                    <Button type="primary" shape="circle" icon={<SearchOutlined />} onClick={() => setDetail(record)} style={{ margin: '0 10px' }}></Button>
                    <Button type="primary" danger shape="circle" icon={<CloseOutlined />} onClick={() => deletethis(record)} style={{ margin: '0 10px' }}></Button>
                </label>
            ),
        }
    ];
    const submit = async (arg: any) => {
        if (adds) {
            const res = await api.swiper.AddSwiper({ ...arg, img })
            console.log(res);
            if (res.data.code == 200) {
                message.success('添加成功')
                getlist()
                setOpen(false)
            }
        } else {
            const res = await api.swiper.updateSwiper({ ...arg, img })
            console.log(res);
            if (res.data.code == 200) {
                message.success('修改成功')
                getlist()
                setOpen(false)
            }
        }


    }
    const onClose = () => {
        setOpen(false)
    }
    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    const [img, setAvatar] = useState('')
    async function filechange(args: any) {

        if (args.file.status == 'done') {
            console.log(args.file.response.url);
            setAvatar(args.file.response.url)
        }


    }
    return (
        <div>
            <Card>
                <Button style={{ position: 'absolute', right: '10px', zIndex: '2', }} type="primary" danger onClick={addswiper} >+</Button>
                <Table dataSource={list} columns={columns} pagination={false} />
                <Drawer title="订单" placement="right" onClose={onClose} open={open}>
                    <Form
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        style={{ maxWidth: 600 }}
                        onFinish={submit}
                        form={form}
                    >
                        <Form.Item label="编号" name='id'>
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item label="名称" name='name'>
                            <Input />
                        </Form.Item>
                        <Form.Item label="链接" name='herf'>
                            <Input />
                        </Form.Item>
                        <Form.Item label="介绍" name='bei3'>
                            <Input />
                        </Form.Item>
                        <Form.Item label="头像" name='img'>
                            <Input />
                        </Form.Item>
                        <Form.Item label="头像" valuePropName="fileList" >
                            <Upload action="http://localhost:3005/api/upload" listType="picture-card" maxCount={1} name='file' onChange={filechange} >
                                <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: 8 }}>Upload</div>
                                </div>
                            </Upload>
                        </Form.Item>
                        {adds ? <Button htmlType='submit'>添加</Button> : <Button htmlType='submit'>修改</Button>}

                    </Form>
                </Drawer>
            </Card>
        </div>
    )
}
